<template>
	<view>
		<u-navbar :is-back="true" :is-fixed="true" title="涉农申报列表"></u-navbar>
		<view class="fixed-top bg-white" style="margin-top: 44px;">

			<view class="px-2 mt-2 pb-2 dfes">
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="keyword" :action-style="actionStyle"></u-search>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>
		<view class=" mt-12 pl-2 pr-2">
			<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false">

				<view class="dfex mt-2">
					<view class="tab-item pb-1" v-for="(tab, index) in tabs" :key="index" @click="currentTab = index"
						:class="{ 'active': currentTab === index }">
						{{ tab }}
					</view>
				</view>
				<view class="mt-3 dfex mt-5" v-for="(item, index) in currentTabContent" :key="index">
					<view>
						<view class="dfel">
							<view class="text-BD3124">{{item.name}}</view>
							<view class="ml-2 bg-F5C9C5 text-BD3124 pl-1 pr-1 rounded p">{{item.tir}}</view>
						</view>
						<view class="dfes mt-1">
							<view class="mr-2 p font-12 rounded  bg-FCE07F" v-if="item.text" v-for="(ite, indx) in item.text">
								<view class="text-FFC251">{{ite.name}}</view></view>
						</view>
					</view>
					<view class="bg-78AB06 p-1 rounded-circle font-14 text-white">申请查看主体信息</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				tabs: ['涉农主体列表', '可查看列表'],
				nenoList: [{
						title: '涉农申报业务标题',
						name: '报名中',
						kaisTiem: '2024.01.13 10:43:50',
						jshuTiem: '2024.01.14 10:43:50',
						annt: '查看报名详情',
					},
					{
						title: '涉农申报业务标题1',
						name: '已结束',
						kaisTiem: '2024.01.13 10:43:50',
						jshuTiem: '2024.01.14 10:43:50',
						annt: '停止报名',
					}
				],
				currentTab: 0,
				tabContents: [
					[{
							name: '三亚芒果农业有限公司',
							tir: '异常',
							text: [{
								name: '芒果'
							}, {
								name: '三亚',
							}],
						},
						{
							name: '三亚芒果农业有限公司',
							tir: '异常',
							text: [{
									name: '芒果'
								}, {
									name: '澄迈',
								},
								{
									name: '三亚',
								}
							],
						},
						{
							name: '三亚芒果农业有限公司',
							tir: '异常',
							text: [{
								name: '芒果'
							}, {
								name: '三亚',
							}],
						},
						{
							name: '三亚芒果农业有限公司',
							tir: '异常',
							text: [{
								name: '芒果'
							}, {
								name: '三亚',
							}, {
								name: '澄迈',
							}]
						}
					],
					[{
							name: '三亚芒果农业有限公司',
							tir: '异常',
							text: [{
									name: '芒果'
								}, {
									name: '澄迈',
								},
								{
									name: '三亚',
								}
							],
						},
						{
							name: '三亚芒果农业有限公司',
							tir: '异常',
							text: [{
									name: '芒果'
								}, {
									name: '澄迈',
								},
								{
									name: '三亚',
								}
							],
						}
						// 其他内容...
					]
				]
			}
		},
		computed: {
			currentTabContent() {
				return this.tabContents[this.currentTab];
			}
		},
		methods: {

		}
	}
</script>

<style>
	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #8ED0F2;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #8ED0F2;
	}
</style>